<template>
  <div>
    <h1>setup 语法糖</h1>
    <p>{{ msg }}</p>
    <input v-model="msg" />
    <button @click="count++">{{ count }}</button>
    <p>doubleCount: {{ doubleCount }}</p>
    <input ref="inp" value="默认值" /> <button @click="showVal">获取值</button>
    <button @click="stop()">停止监听</button>
  </div>
</template>
<script setup>
// setup语法糖不用写setup，不用导出，组件导入后不用注册
// ref 值类型响应式数据 ,reactive 引用类型响应式数据, computed计算 on当 Mounted挂载，watch监听 watchEffect监听副作用
import { ref, computed, onMounted, watch, watchEffect } from 'vue'
// 定义数据
const count = ref(5)
const msg = ref('你好setup')
// 计算数据
const doubleCount = computed(() => {
  return count.value * 2
})
// 定义引用
const inp = ref(null)
// 定义方法获取inp的值
function showVal() {
  // inp.value ref引用的表单对象
  // inp.value.value 表单的值
  alert(inp.value.value)
}
// 组件挂载后弹出表单的值
onMounted(() => {
  alert(inp.value.value)
})
// setup方法里面组件还没有完全挂载，需要用挂载的生命周期钩子函数
// setup生命周期钩子函数没有beforeCreate 和created
// setup中生命周期钩子函数前面加on
// onBeforeMount 挂载前   onBeforeUpdate更新前  onBeforeUnmount卸载前
// onMounted 挂载完毕     onUpdated 更新完毕    onUnmount卸载后

// 监听count的变化
var stop = watch(count, (nval, oval) => {
  console.log('count变化为', nval, oval)
})

// 监听任意数据
// 只要在watchEeffect引用的数据变化，都会触发回调函数
watchEffect(() => {
  console.log(count.value, 'count变化了')
  console.log(msg.value, 'msg变化了')
})
</script>
